import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:kunlun_gas/AppViews/EngineerOrderView/model/meter_info_model.dart';
import '../../../app_files.dart';

import 'action.dart';
import 'state.dart';

Widget buildView(
    MeterAddViewState state, Dispatch dispatch, ViewService viewService) {
  MeterInfoModel infoModel = state.meterInfoModel;
  return Scaffold(
    appBar: myAppBar(viewService.context, title: '添加表具'),
    backgroundColor: Colors.white,
    body: MyInkWellWidget(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 12),
        child: ListView(
          keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
          children: [
            // ///用户身份证
            // Container(
            //   height: 50,
            //   decoration: BoxDecoration(
            //       border: Border(
            //           bottom: BorderSide(color: ThemeConfig.separeColor))),
            //   child: Row(
            //     children: [
            //       Container(
            //         width: 110,
            //         child: Row(
            //           children: [
            //             Text(
            //               '用户身份证:',
            //               style: TextThemeConfig.Font15WithColor22,
            //             ),
            //           ],
            //         ),
            //       ),
            //       Expanded(
            //         child: TextField(
            //           minLines: 1,
            //           enabled: true,
            //           style: TextThemeConfig.Font14WithColor22,
            //           keyboardType:
            //           TextInputType.numberWithOptions(decimal: true),
            //           decoration: InputDecoration(
            //             border: InputBorder.none,
            //             hintText: "请输入用户身份证",
            //             hintStyle: TextThemeConfig.Font14WithColor99,
            //             // contentPadding: EdgeInsets.only(bottom: 9),
            //           ),
            //           onChanged: (text) => state.meterInfoModel.userIdNo = text,
            //         ),
            //       ),
            //     ],
            //   ),
            // ),

            ///表编号
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '表具编号:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      minLines: 1,
                      enabled: true,
                      style: TextThemeConfig.Font14WithColor22,
                      keyboardType:
                          TextInputType.numberWithOptions(decimal: true),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "请输入表具编号",
                        hintStyle: TextThemeConfig.Font14WithColor99,
                        // contentPadding: EdgeInsets.only(bottom: 9),
                      ),
                      onChanged: (text) => state.meterInfoModel.meterNo = text,
                    ),
                  ),
                ],
              ),
            ),

            ///控制器
            MyInkWellWidget(
              child: Container(
                height: 50,
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(color: ThemeConfig.separeColor))),
                child: Row(
                  children: [
                    Container(
                      width: 110,
                      child: Row(
                        children: [
                          Text(
                            '表具类型:',
                            style: TextThemeConfig.Font15WithColor22,
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: state.selectFactory == null
                          ? Text(
                              '请选择',
                              style: TextThemeConfig.Font14WithColor99,
                            )
                          : Text(
                              state.factoryItems[state.selectFactory]
                                  .meterFactory,
                              style: TextThemeConfig.Font14WithColor22,
                            ),
                    ),
                    Image.asset('images/right_arrow.png'),
                  ],
                ),
              ),
              onTap: () async {
                List<String> titles = state.factoryItems
                    .map<String>((e) => e.meterFactory)
                    .toList();
                int res = await showModalBottomSheet(
                    context: viewService.context,
                    builder: (BuildContext context) {
                      return CommonUtils.routeBuildPage(
                          context,
                          RoutePath.bottomSelectView,
                          {'items': titles, 'title': '请选择控制器'});
                    },
                    isScrollControlled: true,
                    backgroundColor: Colors.transparent);
                if (res != null && state.selectFactory != res) {
                  state.selectFactory = res;
                  infoModel.meterFactory =
                      state.factoryItems[state.selectFactory].meterFactory;
                  state.factoryItems[state.selectFactory].selectMeterSpec =
                      null;
                  state.factoryItems[state.selectFactory].selectUnitType = null;
                  infoModel.meterCtrlCode =
                      state.factoryItems[state.selectFactory].controlCode;
                  infoModel.meterType =
                      state.factoryItems[state.selectFactory].meterType;
                  dispatch(MeterAddViewActionCreator.onAction());
                }
              },
            ),

            ///控制器编码
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '表具编码:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  state.selectFactory == null
                      ? Text(
                          '',
                          style: TextThemeConfig.Font14WithColor99,
                        )
                      : Text(
                          state.factoryItems[state.selectFactory].controlCode,
                          style: TextThemeConfig.Font14WithColor66,
                        ),
                ],
              ),
            ),

            ///气表种类
            state.selectFactory == null
                ? Container()
                : MyInkWellWidget(
                    child: Container(
                      height: 50,
                      decoration: BoxDecoration(
                          border: Border(
                              bottom:
                                  BorderSide(color: ThemeConfig.separeColor))),
                      child: Row(
                        children: [
                          Container(
                            width: 110,
                            child: Row(
                              children: [
                                Text(
                                  '气表种类:',
                                  style: TextThemeConfig.Font15WithColor22,
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            child: state.factoryItems[state.selectFactory]
                                        .selectMeterSpec ==
                                    null
                                ? Text(
                                    '请选择',
                                    style: TextThemeConfig.Font14WithColor99,
                                  )
                                : Text(
                                    state
                                        .factoryItems[state.selectFactory]
                                        .meterSpecs[state
                                            .factoryItems[state.selectFactory]
                                            .selectMeterSpec]
                                        .values
                                        .first,
                                    style: TextThemeConfig.Font14WithColor22,
                                  ),
                          ),
                          Image.asset('images/right_arrow.png'),
                        ],
                      ),
                    ),
                    onTap: () async {
                      int res = await showModalBottomSheet(
                          context: viewService.context,
                          builder: (BuildContext context) {
                            return CommonUtils.routeBuildPage(
                                context, RoutePath.bottomSelectView, {
                              'items': state
                                  .factoryItems[state.selectFactory].meterSpecs
                                  .map((e) => e.values.first)
                                  .toList(),
                              'title': '请选择气表种类'
                            });
                          },
                          isScrollControlled: true,
                          backgroundColor: Colors.transparent);
                      if (res != null) {
                        state.factoryItems[state.selectFactory]
                            .selectMeterSpec = res;

                        infoModel.meterSpecs =
                            '${state.factoryItems[state.selectFactory].meterSpecs[res].keys.first}=${state.factoryItems[state.selectFactory].meterSpecs[res].values.first}';
                        state.factoryItems[state.selectFactory]
                            .selectUnitType = null;
                        infoModel.meterUnitType = null;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }
                    },
                  ),

            ///母表类型
            state.selectFactory == null
                ? Container()
                : MyInkWellWidget(
                    child: Container(
                      height: 50,
                      decoration: BoxDecoration(
                          border: Border(
                              bottom:
                                  BorderSide(color: ThemeConfig.separeColor))),
                      child: Row(
                        children: [
                          Container(
                            width: 110,
                            child: Row(
                              children: [
                                Text(
                                  '母表类型:',
                                  style: TextThemeConfig.Font15WithColor22,
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            child: state.factoryItems[state.selectFactory]
                                        .selectUnitType ==
                                    null
                                ? Text(
                                    '请选择',
                                    style: TextThemeConfig.Font14WithColor99,
                                  )
                                : Text(
                                    state.factoryItems[state.selectFactory]
                                        .selectUnitType,
                                    style: TextThemeConfig.Font14WithColor22,
                                  ),
                          ),
                          Image.asset('images/right_arrow.png'),
                        ],
                      ),
                    ),
                    onTap: () async {
                      if (state.factoryItems[state.selectFactory]
                              .selectMeterSpec ==
                          null) {
                        CommonUtils.showErrorInfo(
                            viewService.context, '请选择气表种类');
                        return;
                      }
                      List items = [];

                      print(state
                          .factoryItems[state.selectFactory].meterUnitTypes);
                      String key = state
                          .factoryItems[state.selectFactory]
                          .meterSpecs[state.factoryItems[state.selectFactory]
                              .selectMeterSpec]
                          .keys
                          .first;
                      for (Map info in state
                          .factoryItems[state.selectFactory].meterUnitTypes) {
                        if (info.keys.first == key ||
                            info.keys.first == 'flutter') {
                          items.add(info.values.first);
                        }
                      }
                      int res = await showModalBottomSheet(
                          context: viewService.context,
                          builder: (BuildContext context) {
                            return CommonUtils.routeBuildPage(
                                context,
                                RoutePath.bottomSelectView,
                                {'items': items, 'title': '请选择母表类型'});
                          },
                          isScrollControlled: true,
                          backgroundColor: Colors.transparent);
                      if (res != null) {
                        state.factoryItems[state.selectFactory].selectUnitType =
                            items[res];

                        infoModel.meterUnitType = state
                            .factoryItems[state.selectFactory].selectUnitType;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }
                    },
                  ),

            ///初装表底
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '初装表底:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      minLines: 1,
                      enabled: true,
                      style: TextThemeConfig.Font14WithColor22,
                      keyboardType:
                          TextInputType.numberWithOptions(decimal: true),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "请输入初装表底",
                        hintStyle: TextThemeConfig.Font14WithColor99,
                        // contentPadding: EdgeInsets.only(bottom: 9),
                      ),
                      onChanged: (text) =>
                          state.meterInfoModel.meterBaseVolume = text,
                    ),
                  ),
                ],
              ),
            ),

            ///进气方向
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '进气方向:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.meterBiaoxiang == '左'
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12),
                              child: Text(
                                '左',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.meterBiaoxiang = '左';
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                  Padding(
                    padding: EdgeInsets.only(left: 12),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.meterBiaoxiang == '右'
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12, top: 1),
                              child: Text(
                                '右',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.meterBiaoxiang = '右';
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                ],
              ),
            ),

            ///安装位置
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '安装位置:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.meterInstallType == 1
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12),
                              child: Text(
                                '户内',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.meterInstallType = 1;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                  Padding(
                    padding: EdgeInsets.only(left: 12),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.meterInstallType == 2
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12, top: 1),
                              child: Text(
                                '户外',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.meterInstallType = 2;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                ],
              ),
            ),

            ///计费模式
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '计费模式:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.meterFeeMode == 1
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12),
                              child: Text(
                                '计费',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.meterFeeMode = 1;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                  Padding(
                    padding: EdgeInsets.only(left: 12),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.meterFeeMode == 2
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12, top: 1),
                              child: Text(
                                '计量',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.meterFeeMode = 2;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                ],
              ),
            ),

            ///是否加封
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '是否加封:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.isClosed == 1
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12),
                              child: Text(
                                '是',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.isClosed = 1;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                  Padding(
                    padding: EdgeInsets.only(left: 12),
                  ),
                  MyInkWellWidget(
                      child: Container(
                        color: Colors.white,
                        padding: EdgeInsets.only(top: 8, bottom: 8),
                        child: Row(
                          children: [
                            Image.asset(
                              state.meterInfoModel.isClosed == 0
                                  ? 'images/icon_select.png'
                                  : 'images/icon_normal.png',
                              width: 14,
                              fit: BoxFit.fitWidth,
                            ),
                            Container(
                              padding: EdgeInsets.only(left: 12, top: 1),
                              child: Text(
                                '否',
                                style: TextThemeConfig.Font14WithColor22,
                              ),
                            ),
                          ],
                        ),
                      ),
                      onTap: () {
                        state.meterInfoModel.isClosed = 0;
                        dispatch(MeterAddViewActionCreator.onAction());
                      }),
                ],
              ),
            ),

            ///表具封号
            state.meterInfoModel.isClosed == 1
                ? Container(
                    height: 50,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom:
                                BorderSide(color: ThemeConfig.separeColor))),
                    child: Row(
                      children: [
                        Container(
                          width: 110,
                          child: Row(
                            children: [
                              Text(
                                '表具封号:',
                                style: TextThemeConfig.Font15WithColor22,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: TextField(
                            minLines: 1,
                            enabled: true,
                            style: TextThemeConfig.Font14WithColor22,
                            keyboardType:
                                TextInputType.numberWithOptions(decimal: true),
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "请输入表具封号",
                              hintStyle: TextThemeConfig.Font14WithColor99,
                              // contentPadding: EdgeInsets.only(bottom: 9),
                            ),
                            onChanged: (text) =>
                                state.meterInfoModel.meterFengNumber = text,
                          ),
                        ),
                      ],
                    ),
                  )
                : Container(),

            ///备注
            Container(
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: ThemeConfig.separeColor))),
              child: Row(
                children: [
                  Container(
                    width: 110,
                    child: Row(
                      children: [
                        Text(
                          '备注信息:',
                          style: TextThemeConfig.Font15WithColor22,
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: TextField(
                      minLines: 1,
                      enabled: true,
                      style: TextThemeConfig.Font14WithColor22,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "请输入备注信息",
                        hintStyle: TextThemeConfig.Font14WithColor99,
                        // contentPadding: EdgeInsets.only(bottom: 9),
                      ),
                      onChanged: (text) =>
                          state.meterInfoModel.meterMemo = text,
                    ),
                  ),
                ],
              ),
            ),

            Container(
              margin:
                  EdgeInsets.only(top: 100, left: 15, right: 15, bottom: 30),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                color: ThemeConfig.mainColor,
              ),
              height: 50,
              width: double.infinity,
              child: MyInkWellWidget(
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 1),
                    child: Text(
                      '添加',
                      style: TextThemeConfig.Font16WithWhite,
                    ),
                  ),
                ),
                onTap: () => dispatch(MeterAddViewActionCreator.onSubmit()),
              ),
            ),
          ],
        ),
      ),
      onTap: () => CommonUtils.closeKey(viewService.context),
    ),
  );
}
